import { MenuColorConfig, ThemeSwitcher } from '@/components';
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  FileTextOutlined,
  PayCircleOutlined,
  ShoppingCartOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, Progress, Row, Statistic } from 'antd';
import React from 'react';

/**
 * 分析页面
 */
const Welcome: React.FC = () => {
  return (
    <PageContainer>
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总销售额"
              value={112893}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<PayCircleOutlined />}
              suffix="¥"
            />
            <div style={{ marginTop: 8 }}>
              <span style={{ color: '#3f8600' }}>
                <ArrowUpOutlined /> 12%
              </span>
              <span style={{ marginLeft: 8, color: '#666' }}>较上周</span>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="访问量"
              value={11280}
              valueStyle={{ color: '#cf1322' }}
              prefix={<UserOutlined />}
            />
            <div style={{ marginTop: 8 }}>
              <span style={{ color: '#cf1322' }}>
                <ArrowDownOutlined /> 2%
              </span>
              <span style={{ marginLeft: 8, color: '#666' }}>较上周</span>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="订单量"
              value={9280}
              valueStyle={{ color: '#1890ff' }}
              prefix={<ShoppingCartOutlined />}
            />
            <div style={{ marginTop: 8 }}>
              <span style={{ color: '#3f8600' }}>
                <ArrowUpOutlined /> 8%
              </span>
              <span style={{ marginLeft: 8, color: '#666' }}>较上周</span>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="转化率"
              value={93.2}
              precision={1}
              valueStyle={{ color: '#722ed1' }}
              prefix={<FileTextOutlined />}
              suffix="%"
            />
            <div style={{ marginTop: 8 }}>
              <span style={{ color: '#3f8600' }}>
                <ArrowUpOutlined /> 5%
              </span>
              <span style={{ marginLeft: 8, color: '#666' }}>较上周</span>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 进度和目标 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title="销售目标完成情况" extra={<Button type="link">查看详情</Button>}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>月度目标</span>
                <span>75%</span>
              </div>
              <Progress percent={75} strokeColor="#1890ff" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>季度目标</span>
                <span>60%</span>
              </div>
              <Progress percent={60} strokeColor="#52c41a" />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>年度目标</span>
                <span>45%</span>
              </div>
              <Progress percent={45} strokeColor="#fa8c16" />
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="主题配置" extra={<Button type="link">更多设置</Button>}>
            <div style={{ marginBottom: 16 }}>
              <ThemeSwitcher />
            </div>
            <div>
              <MenuColorConfig onSuccess={() => window.location.reload()} />
            </div>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Welcome;
